<template>
    <view>
        <view class="goods_infobox">
            <view class="goods_type" :style="typeval == 0 ? '' : 'border-bottom:0;'">
                <view class="type_til">商品分类</view>
                <view class="type_arrbox" @click="showtype = true">
                    <view class="type_arr">{{ typeText ? typeText[0] : '请选择' }}</view>
                    <image class="type_img"
                        src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image>
                </view>
            </view>
            <view class="typeval" v-if="typeval != 0">{{ '该分类平台扣点' + (typeval * 100) + '%' }}</view>
            <view class="goods_type">
                <view class="type_til">商品名称</view>
                <input class="shopname" type="text" placeholder="请输入商品名称" v-model="reqData.ProductName">
            </view>
            <view class="goods_type">
                <view class="type_til">商品标签</view>
                <input class="shopname" type="text" placeholder="请输入商品标签" v-model="reqData.Tags">
            </view>
            <view class="goods_title_box">
                <view class="goods_til">商品主图</view>
                <!-- <input class="goods_text" type="text" placeholder="请填写商品名称、产地等关键信息" v-model="goodtitle"> -->
                <view class="goods_mainimg">
                    <view class="item" v-for="(item, index) in mainimg" :key="index">
                        <view class="del_con" @click.stop="delmainImg(index)">
                            <uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
                        </view>
                        <image :src="item.tempUrl" mode="aspectFill" />
                    </view>
                    <image class="main_icon" v-if="mainimg.length < 9"
                        src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321787826561148.png"
                        @click="uploadmain"></image>
                </view>
            </view>
        </view>
        <view class="goods_delimgbox">
            <view class="goods_deltil">商品详情图</view>
            <view class="goods_delimg">
                <view class="item" v-for="(item, index) in detailsimg" :key="index">
                    <view class="del_con" @click.stop="delImg(index)">
                        <uni-icons type="closeempty" color="#fff" size="16"></uni-icons>
                    </view>
                    <image :src="item.tempUrl" mode="aspectFill" />
                </view>
                <image class="del_icon" v-if="detailsimg.length < 9"
                    src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321787619411200.png"
                    @click="uploaddetails"></image>
            </view>
        </view>
				<block>
					<view class="goods_SkuTitle">
						编辑商品规格
					</view>
					<view class="goods_grow" v-for="(item, index) in specList" :key="index">
					    <view class="grow">
					        <view class="grow_til">商品规格</view>
					        <input class="grow_input" type="text" placeholder="请填写" v-model="item.Style">
					    </view>
					    <view class="grow">
					        <view class="grow_til">商品售价</view>
					        <input class="grow_input" type="text" placeholder="请填写" v-model="item.Price">
					    </view>
					    <view class="grow">
					        <view class="grow_til">库存</view>
					        <input class="grow_input" type="text" placeholder="请填写" v-model="item.Stock">
					    </view>
					    <view class="grow_sp" v-if="index == (specList.length - 1)" @click="sp_add">
					        <image class="sp_img" src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17321798393631354.png">
					        </image>
					        <view class="sptitle">添加商品规格</view>
					    </view>
					    <view class="grow_sp" v-else>
					        <image class="sp_imgdel"
					            src="https://giftapp.oss-cn-shenzhen.aliyuncs.com/upload/17322568049101191.png"></image>
					        <view class="sp_del" @click="sp_delList(index)">删除规格</view>
					    </view>
					</view>
				</block>
				
        

        <view class="bottombox">
            <view class="bottombtn">
                <view class="draft_btn">保存草稿</view>
                <view class="add_btn" @click="Publish">{{ '发布商品' }}</view>
            </view>
        </view>

        <!-- 商品分类 -->
        <u-picker :show="showtype" immediateChange @confirm="setShopType" @cancel="showtype = false"
            :columns="shoptypeList"></u-picker>
    </view>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            showtype: false,
            typeText: '',
            typeval: 0,
            goodtitle: '',
            mainimg: [],
            detailsimg: [],
            specList: [
                {
                    Style: '',
                    Price: '',
                    Stock: 99,
                },
            ],
            shoptypeList: [],
            typeList: [],
            reqData: {
                ProductName: '', // 商品名称
                ProductNo: '',//商品编号
                ProductCatalog: '',//商品分类ID
                Images: '',// 商品主图
                Description: '',//商品详情
                Tags: '', // 标签
            },
            shop: {},
        };
    },
    onLoad() {
        this.GetProduct()
        // this.IsShopManage()
        this.MyShopSaleData()
    },
    methods: {
        async MyShopSaleData() {
            let res = await this.$api.post('/Order/MyShopSaleData')
            if (res.code == 0) {
                this.shop = res.data
            }

        },
        delmainImg(index) {
            this.mainimg.splice(index, 1);
        },
        delImg(index) {
            this.detailsimg.splice(index, 1);
        },
        setShopType(e) {
            this.typeText = e.value
            this.showtype = false
            for (let i = 0; i < this.typeList.length; i++) {
                if (this.typeText == this.typeList[i].CataName) {
                    this.reqData.ProductCatalog = this.typeList[i].ID
                    this.typeval = this.typeList[i].PlatCommission
                    return
                }

            }
        },
        async GetProduct() {
            let list = []
            let res = await this.$api.post('Products/GetProductCatalog')
            if (res.code == 0) {
                this.typeList = res.data
                for (let i = 0; i < res.data.length; i++) {
                    list.push(res.data[i].CataName)

                }
                this.shoptypeList.push(list)
            }
        },
        async Publish() {
            let _this = this
            let main_img = []
            for (let i = 0; i < this.mainimg.length; i++) {
                main_img.push(this.mainimg[i].netPath)
            }
            this.reqData.Images = main_img.join(',')
            let deta_img = []
            for (let i = 0; i < this.detailsimg.length; i++) {
                deta_img.push(this.detailsimg[i].netPath)
            }
            this.reqData.Description = deta_img.join(',')
            let itemJson = JSON.stringify(this.specList)
            let res = await this.$api.post('Product/Publish', {
                ...this.reqData,
                StyleItemStr: itemJson,
                ShopID: this.shop.Shop.ID
            })
            if (res.code == 0) {
                _this.$pv.msg('发布成功');
                setTimeout(() => {
                    uni.navigateBack()
                }, 800);
                // let response = await this.$api.post('/Payment/BasePayV2', {
                //     EventType: res.data.EventType,
                //     EventID: res.data.EventID,
                //     body:res.data.body,
                //     total_fee : res.data.total_fee,
                //     SourcePage: 'pages/store/goods_add',
                //     PayChannel: 'weixin',
                // });

                // if (response.code == 0) {
                //     let payObj = JSON.parse(response.data);
                //     // console.log(payObj, '==================PayV2----res.data')

                //     uni.requestPayment({
                //         provider: 'wxpay',
                //         // #ifdef MP-WEIXIN
                //         timeStamp: payObj.timeStamp,
                //         nonceStr: payObj.nonceStr,
                //         package: payObj.package,
                //         signType: payObj.signType,
                //         paySign: payObj.paySign,
                //         // #endif
                //         success: async function (res) {
                //             _this.$pv.msg('支付成功');
                //             // _this.fetchData(this.ProductID)
                //             _this.nav_to('/pages/store/shop_man')
                //         },
                //         fail: function (err) {
                //             _this.$pv.msg('您已取消支付');
                //         },
                //     });
                // }
            }
        },
        sp_add() {
            this.specList.unshift({
                Style: '',
                Price: '',
                Stock: 99,
            })
        },
        sp_delList(index) {
            this.specList.splice(index, 1)
        },
        //文件上传
        async uploading(url, tempKey) {
            const r = await this.$upload(url, (pro) => {
                for (let i = 0; i < this.mainimg.length; i++) {
                    if (this.mainimg[i].tempKey == tempKey) {
                        this.mainimg[i].pro = pro;
                    }
                }
            });
            console.log(r, 'r');
            for (let i = 0; i < this.mainimg.length; i++) {
                if (this.mainimg[i].tempKey == tempKey) {
                    this.mainimg[i].netPath = r;
                }
                console.log('net');

            }
            console.log(this.mainimg);
            this.$pv.closeLoad()
            // this.reqData.Images.push(r)
        },
        uploadmain() {
            let _this = this;
            let imglength = this.mainimg.length || 0
            uni.chooseMedia({
                count: 9 - imglength,
                mediaType: ['image'],
                sourceType: ['album', 'camera'],
                maxDuration: 30,
                camera: 'back',
                async success(res) {
                    console.log(res, 'res');
                    for (let i = 0; i < res.tempFiles.length; i++) {
                        let o = {
                            duration: 0,
                            fileType: res.tempFiles[i].fileType,
                            tempUrl: res.tempFiles[i].tempFilePath,
                            flieUrl: res.tempFiles[i].tempFilePath,
                            tempKey: uni.$u.guid(8),
                            pro: 0,
                        };
                        _this.mainimg.push(o);
                        let rex = await _this.uploading(o.flieUrl, o.tempKey);
                    }
                },
            });
        },
        async uploadDeing(url, tempKey) {
            const r = await this.$upload(url, (pro) => {
                for (let i = 0; i < this.detailsimg.length; i++) {
                    if (this.detailsimg[i].tempKey == tempKey) {
                        this.detailsimg[i].pro = pro;
                    }
                }
            });
            console.log(r, 'r');
            for (let i = 0; i < this.detailsimg.length; i++) {
                if (this.detailsimg[i].tempKey == tempKey) {
                    this.detailsimg[i].netPath = r;
                }
                console.log('net');

            }
            console.log(this.detailsimg);
            this.$pv.closeLoad()
            // this.reqData.Images.push(r)
        },
        uploaddetails() {
            let _this = this;
            let imglength = this.detailsimg.length || 0
            uni.chooseMedia({
                count: 9 - imglength,
                mediaType: ['image'],
                sourceType: ['album', 'camera'],
                maxDuration: 30,
                camera: 'back',
                async success(res) {
                    console.log(res, 'res');
                    for (let i = 0; i < res.tempFiles.length; i++) {
                        let o = {
                            duration: 0,
                            fileType: res.tempFiles[i].fileType,
                            tempUrl: res.tempFiles[i].tempFilePath,
                            flieUrl: res.tempFiles[i].tempFilePath,
                            tempKey: uni.$u.guid(8),
                            pro: 0,
                        };
                        _this.detailsimg.push(o);
                        let rex = await _this.uploadDeing(o.flieUrl, o.tempKey);
                    }
                },
            });
        },
    },

}
</script>
<style lang='scss'>
page {
    background-color: #f6f6f6;
}

.goods_infobox {
    background-color: #fff;
    margin-top: 16rpx;
    padding-bottom: 32rpx;

    .goods_type {
        width: calc(100%-32rpx);
        height: 106rpx;
        margin-left: 32rpx;
        border-bottom: 1rpx solid #e4e4e4;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 32rpx;
        box-sizing: border-box;

        .shopname {
            flex: 1;
            text-align: right;
            font-size: 32rpx;
        }

        .type_til {
            font-size: 32rpx;
            color: #333333;
        }

        .type_arrbox {
            display: flex;
            align-items: center;

            .type_img {
                width: 32rpx;
                height: 32rpx;
            }

            .type_arr {
                font-size: 32rpx;
                color: #333333;
            }
        }
    }

    .typeval {
        width: 100%;
        text-align: right;
        font-size: 20rpx;
        color: red;
        border-bottom: 1rpx solid #e4e4e4;
        padding-right: 32rpx;
        padding-bottom: 4rpx;
    }

    .goods_title_box {
        margin-top: 30rpx;
        padding-left: 32rpx;
        box-sizing: border-box;

        .goods_til {
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 24rpx;
        }

        .goods_text {
            font-size: 32rpx;
            color: #333333;
            margin-bottom: 48rpx;
        }

        .goods_mainimg {
            display: flex;
            flex-wrap: wrap;

            // justify-content: space-between;
            .item {
                position: relative;
                // margin-top: 15rpx;
                margin-right: 24rpx;
                margin-bottom: 24rpx;
                width: 152rpx;
                height: 152rpx;
                background-color: #eee;
                border-radius: 16rpx;

                .pro {
                    position: absolute;
                    top: 50%;
                    width: 100%;
                    transform: translateY(-50%);
                    text-align: center;
                    color: #3a3a3a;
                }

                image {

                    height: 100%;
                    width: 100%;
                    border-radius: 16rpx;
                }

                .del_con {
                    position: absolute;
                    top: 0;
                    right: 0;
                    background: rgba(0, 0, 0, 0.4);
                    height: 40rpx;
                    width: 40rpx;
                    text-align: center;
                    line-height: 40rpx;
                    border-radius: 0 16rpx 0 16rpx;
                }
            }

            .main_icon {
                width: 152rpx;
                height: 152rpx;
                // margin-left: 24rpx;
            }
        }
    }
}

.goods_delimgbox {
    background-color: #fff;
    padding-left: 32rpx;
    padding-bottom: 32rpx;
    box-sizing: border-box;
    margin-top: 16rpx;
		padding-top: 16rpx;
		
    .goods_deltil {
        font-size: 32rpx;
        color: #333333;
				margin-bottom: 16rpx;
        /* margin: 30rpx 0 24rpx 0; */
    }

    .goods_delimg {
        display: flex;
        flex-wrap: wrap;

        // justify-content: space-between;
        .item {
            position: relative;
            margin-right: 24rpx;
            margin-bottom: 24rpx;
            width: 152rpx;
            height: 152rpx;
            background-color: #eee;
            border-radius: 16rpx;

            .pro {
                position: absolute;
                top: 50%;
                width: 100%;
                transform: translateY(-50%);
                text-align: center;
                color: #3a3a3a;
            }

            image {

                height: 100%;
                width: 100%;
                border-radius: 16rpx;
            }

            .del_con {
                position: absolute;
                top: 0;
                right: 0;
                background: rgba(0, 0, 0, 0.4);
                height: 40rpx;
                width: 40rpx;
                text-align: center;
                line-height: 40rpx;
                border-radius: 0 16rpx 0 16rpx;
            }
        }

        .del_icon {
            width: 152rpx;
            height: 152rpx;
        }
    }
}


.goods_SkuTitle{
	font-size: 32rpx;
	color: #333333;
	margin-top: 30rpx;
	/* margin-left: 24rpx; */
	padding: 16rpx 0 0rpx 32rpx;
	background-color: #fff;
}
.goods_grow {
    background-color: #fff;

    .grow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: calc(100% - 32rpx);
        height: 104rpx;
        margin-left: 32rpx;
        border-bottom: 1rpx solid #e4e4e4;
        padding-right: 32rpx;
        box-sizing: border-box;

        .grow_til {
            width: 150rpx;
            font-size: 32rpx;
            color: #333333;
        }

        .grow_input {
            flex: 1;
            text-align: right;
            font-size: 32rpx;
        }
    }

    .grow_sp {
        display: flex;
        align-items: center;
        width: calc(100% - 32rpx);
        height: 104rpx;
        margin-left: 32rpx;

        .sp_img {
            width: 40rpx;
            height: 40rpx;
        }

        .sptitle {
            font-size: 32rpx;
            color: #5d8bf8;
            margin-left: 16rpx;
        }

        .sp_imgdel {
            width: 32rpx;
            height: 32rpx;
            margin-left: auto;
        }

        .sp_del {
            font-size: 28rpx;
            color: #5d8bf8;
            margin: 0 32rpx 0 8rpx;
        }
    }
}

.bottombox {
    width: 100%;
    height: 196rpx;
    .bottombtn {
        width: 100%;
        height: 196rpx;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
				z-index: 999;
        .draft_btn {
            width: 200rpx;
            height: 88rpx;
            border-radius: 44rpx;
            border: 2rpx solid #E4E4E4;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
        }

        .add_btn {
            width: 454rpx;
            height: 88rpx;
            background: linear-gradient(98deg, #FFAD26 0%, #FE4E01 100%);
            border-radius: 44rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32rpx;
            color: #fff;
        }
    }
}
</style>